<template>
  <div class="tile is-parent">
    <article class="tile is-child box">
      <h2 class="title is-4">编辑</h2>
      <div class="block">
        <div class="control is-horizontal">
          <div class="control-label">
            <label class="label">作者</label>
          </div>
          <div class="control">
            <div class="input is-fullwidth">
              <input v-model="param.author" type="text">
            </div>
          </div>
        </div>
        <div class="control is-horizontal">
          <div class="control-label">
            <label class="label">标题</label>
          </div>
          <div class="control">
            <div class="input is-fullwidth">
              <input v-model="param.name" type="text">
            </div>
          </div>
        </div>
        <div class="control is-horizontal">
          <div class="control-label">
            <label class="label">副标题</label>
          </div>
          <div class="control">
            <div class="input is-fullwidth">
              <input v-model="param.viceTitle" type="text">
            </div>
          </div>
        </div>
        <div class="control is-horizontal">
          <div class="control-label">
            <label class="label">关键字</label>
          </div>
          <div class="control">
            <div class="input is-fullwidth">
              <input v-model="param.keywords" type="text">
            </div>
          </div>
        </div>
        <!--<div class="control is-horizontal">-->
          <!--<div class="control-label">-->
            <!--<label class="label">语言</label>-->
          <!--</div>-->
          <!--<div class="control">-->
            <!--<div class="input is-fullwidth">-->
              <!--<input v-model="param.langKey" type="text">-->
            <!--</div>-->
          <!--</div>-->
        <!--</div>-->
        <div class="control is-horizontal">
          <div class="control-label">
            <label class="label">来源</label>
          </div>
          <div class="control">
            <div class="input is-fullwidth">
              <input v-model="param.source" type="text">
            </div>
          </div>
        </div>
        <div class="control is-horizontal">
          <div class="control-label">
            <label class="label">图片</label>
          </div>
          <div class="control">
            <upload @upload="getMap" path="news" :imgs.sync="param.image" style="margin-left: -20px" ids="image"></upload>
            <!--<div class="input is-fullwidth">-->
            <!--<input v-model="param.image" type="text">-->
            <!--</div>-->
          </div>
        </div>
        <div class="control is-horizontal">
          <div class="control-label">
            <label class="label">描述</label>
          </div>
          <div class="control">
            <div class="input is-fullwidth">
              <input v-model="param.description" type="text">
            </div>
          </div>
        </div>
        <div class="control is-horizontal">
          <div class="control-label">
            <label class="label">排序</label>
          </div>
          <div class="control">
            <div class="input is-fullwidth">
              <input v-model="param.displayOrder" type="text">
            </div>
          </div>
        </div>
        <div class="control is-horizontal">
          <div class="control-label">
            <label class="label">激活</label>
          </div>
          <div class="control">
            <div class="is-fullwidth">
              <input style="margin-top: 12px" v-model="param.enabled" type="checkbox">
            </div>
          </div>
        </div>
        <div class="control is-horizontal">
          <div class="control-label">
            <label class="label">内容</label>
          </div>
          <div class="control">
            <div class="editors">
              <editor ref="editor" style="margin-left: 0" :htmls.sync="param.content">
              </editor>
            </div>
          </div>
        </div>
        <div class="control is-horizontal">
          <div class="control-label">
            <label class="label">所属类型</label>
          </div>
          <div class="control">
            <div class="select is-fullwidth">
              <select v-model="param.categoryId">
                <option v-for="it in classList" :value="it.id">{{it.name}}</option>
              </select>
            </div>
          </div>
        </div>
        <div class="control is-horizontal">
          <div class="control-label">
            <label class="label"></label>
          </div>
          <div class="control">
            <button class="button is-primary" @click="toModify">保存</button>
            <button class="button is-link" @click="back">关闭</button>
          </div>
        </div>
      </div>
    </article>
  </div>
</template>

<script>
  import editor from '../components/modifyModel/editor.vue'
  import upload from '../components/modifyModel/upload.vue'
  import Vue from 'vue'
  import Message from 'vue-bulma-message'

  const MessageComponent = Vue.extend(Message)

  const openMessage = (propsData = {
    title: '',
    message: '',
    type: '',
    direction: '',
    duration: 1500,
    container: '.messages'
  }) => {
    return new MessageComponent({
      el: document.createElement('div'),
      propsData
    })
  }
  export default {
    components: { editor, upload },

    data () {
      return {
        id:this.$route.query.id,
        param:{
          "author": "",
          "categoryId": 0,
          "content": "",
          "createdDate": "",
          "description": "",
          "displayOrder": 0,
          "enabled": true,
          "image": "",
          "keywords": "",
          "langKey": "",
          "name": "",
          "source": "",
          "viceTitle": "",
          "visits": 0
        },
        classList:[]
      }
    },

    computed: {
    },
    methods: {
      getMap (data) {
        this.param[data.ids] = data.url
      },
      getClass (callback) {
        let vm = this
        this.$http.get('classification/api/parent/88698031519588352/categories',{page:0,size:100}).then(function(res){
          vm.classList = res.data.content
          callback.apply()
        })
      },
      clear () {
        this.param = {}
      },
      back () {
        this.$router.go(-1)
      },
      getModify () {
        let vm = this
        this.$http.get('information/api/information/'+vm.id,{}).then(function(res){
          for(let key in vm.param){
            vm.param[key] = res.data[key]
          }
        })
      },
      toModify () {
        let vm = this
        vm.param.content = this.$refs.editor.getAllHtml()
        let param = Object.assign({id:vm.id},vm.param)
        this.$http.put('information/api/information',param).then(function(res){
          openMessage({
            title: '提示',
            message: '修改成功',
            type: 'primary'
          })
          vm.back()
        })
      },
    },
    mounted () {
      this.$parent.$parent.$refs.nav.status = false
      this.getClass(this.getModify)
    }
  }
</script>

<style lang="scss">
  .editors .edui-container{
    width: 100%;
    margin: 0;
  }
  input{
    line-height: 30px;
  }
</style>
